<template>
  <div class="console-page">
    <el-container>
      <!--左边导航栏-->
      <el-aside width="100px" height="100%">
        <div class="logo">
          <img src="../../assets/img/CatWorkLogo.png" alt="" width="100%" height="100%" style="cursor: pointer" @click="$router.push('/user')">
          <span style="color: white">{{EnterpriseName}}</span>
        </div>
        <div class="menu">
          <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" style="border: 0">
            <el-menu-item id="MemberActive" index="1" class="menuIcon" @click="ToShow">
                <i class="el-icon-user-solid"></i>
                <span slot="title">成员管理</span>
            </el-menu-item>
            <router-link to="/console/data">
            <el-menu-item id="RoleActive" index="2" class="menuIcon menu-padding" @click="ToClose">
              <i class="el-icon-s-data"></i>
              <span slot="title">数据管理</span>
            </el-menu-item>
            </router-link>
          </el-menu>
        </div>
      </el-aside>
      <div v-show="isShow" class="SecondMenu">
        <router-link to="/console/member" tag="div">
          <div id="EnterPrise" index="1" class="sMenuItem" @click="CheckEnterprise" style="margin-top: 30px; color: white">
              <i class="el-icon-user fontColor"></i>
              <span class="fontColor">  企 业 人 员</span>
          </div>
        </router-link>
        <router-link to="/console/post" tag="div">
          <div id="Post" index="2" class="sMenuItem" @click="CheckPost" style="color: white">
            <i class="el-icon-s-check fontColor"></i>
            <span slot="title" class="fontColor">  职 位</span>
          </div>
        </router-link>
        <router-link to="/console/deleteUser" tag="div" style="color: white">
          <div id="Delete" index="3" class="sMenuItem" @click="CheckDelete">
            <i class="el-icon-close fontColor"></i>
            <span slot="title" class="fontColor">  已 禁 用 账 号</span>
          </div>
        </router-link>
      </div>
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script>
  const axios = require('axios');
  import $ from 'jquery'
  export default {
    name: "Console",
    data() {
      return {
        EnterpriseName: "",
        isCollapse: true,
        isShow:false
      }
    },
    created(){
      axios.post('/getEnterPriseName', {'enterprise_id': window.localStorage.getItem("enterprise_id")}).then(res => {
        this.EnterpriseName = res.data.enterprise_name;
      })
    },
    methods: {
      ToShow: function () {
        $('#MemberActive').addClass("is-active");
        $('#RoleActive').removeClass("is-active");
        this.isShow = true;
      },
      ToClose: function () {
        this.isShow = false;
        $('#RoleActive').addClass("is-active");
        $('#MemberActive').removeClass("is-active");
        $('#EnterPrise').removeClass("sMeuItemActive")
        $('#Post').removeClass("sMeuItemActive");
        $('#Delete').removeClass("sMeuItemActive");
      },
      CheckEnterprise: function () {
        $('#EnterPrise').addClass("sMeuItemActive");
        $('#Post').removeClass("sMeuItemActive");
        $('#Delete').removeClass("sMeuItemActive");
      },
      CheckPost: function () {
        $('#Post').addClass("sMeuItemActive");
        $('#EnterPrise').removeClass("sMeuItemActive");
        $('#Delete').removeClass("sMeuItemActive");
      },
      CheckDelete: function () {
        $('#Delete').addClass("sMeuItemActive");
        $('#Post').removeClass("sMeuItemActive");
        $('#EnterPrise').removeClass("sMeuItemActive");
      },
      ToCloseAll: function () {
        this.isShow = false;
        $('#RoleActive').removeClass("is-active");
        $('#MemberActive').removeClass("is-active");
        $('#EnterPrise').removeClass("sMeuItemActive")
        $('#Post').removeClass("sMeuItemActive");
        $('#Delete').removeClass("sMeuItemActive");
      }
    },
  }
</script>

<style scoped>
  @import "../../assets/css/console.css";
  .el-menu-vertical-demo{
    background: #2a2d2f;
  }
</style>
